<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="24">
        <!-- <SearchForm
          v-show="showSearch"
          v-model="queryParams"
          :options="options.formOps"
          @onQuery="getList"
        ></SearchForm>
        <el-row :gutter="10" class="mb8">
  
       
          <right-toolbar
            v-model:showSearch="showSearch"
            @queryTable="getList"
          ></right-toolbar>
        </el-row> -->
        <Table
          ref="table"
          :auto-featch="true"
          :fetch-data="fetchData"
          :options="options.table"
          actionWidth="100"
          :use-action="false"
        >
          <template #yxCondition="{ row }">
            <span style="color: red" v-if="row.yxCondition == '差'">{{
              row.yxCondition
            }}</span>
            <span style="color: greenyellow" v-if="row.yxCondition == '优'">{{
              row.yxCondition
            }}</span>
            <span style="color: blue" v-if="row.yxCondition == '良'">{{
              row.yxCondition
            }}</span>
          </template>
          <template #actionButton="{ row }">
            <el-button type="text" @click="handleEdit(row)">详情</el-button>
          </template>
        </Table>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import Table from "@/components/Table/index.vue";
import formJson from "./components/options.json";
import { apis as APIS } from "@/api/yhpc/fxfxwcqk";
import { useAsyncData, useFormJson } from "@/views/hooks/useAsyncData.js";

const { proxy } = getCurrentInstance();
const ops = useFormJson(formJson, {
  sort: [],
  sortable: [],
});

const options = reactive({
  table: ops,
  formOps: ops.filter((i) =>
    [
      "hiddenSource",
      "hiddenType",
      "hiddenLevel",
      "hiddenCheckType",
      "rectificationUserName",
      "hiddenCheckUser",
    ].includes(i.prop)
  ),
});
const dialogVform = ref();
const table = ref();

const { fetchData, handleEdit, getList, queryParams, form, handleExport } =
  useAsyncData({
    APIS,
    formJson,
    dialogVform,
    table,
    proxy,
  });
</script>

<style lang="scss" scoped>
::v-deep.el-form-item__label {
  text-align: right !important;
}
</style>
